<template>
  <q-page>
    <q-card class="q-ma-sm">
      <q-card-title>项目所用资源统计报表</q-card-title>
    </q-card>
        <q-table class="q-ma-sm" ref="table" color="primary" :data="tableData" :columns="columns"
                 :visible-columns="visibleColumns" row-key="name" :pagination.sync="serverPagination"
                 @request="request" :loading="loading" :rows-per-page-options="rowsPerPageOptions">
          <template slot="top-left" slot-scope="props">
            <q-btn color="secondary" icon="file_download" class="q-mr-sm" @click.native="$store.dispatch('projectReport/fileDownload')"></q-btn>
            <q-table-columns color="secondary" class="q-mr-sm" v-model="visibleColumns" :columns="columns"/>
            <q-btn flat round dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen"/>
          </template>
        </q-table>
  </q-page>
</template>

<script>
import projectReportModule from '../../store/projectReport'
export default {
  preFetch ({ store }) {
    store.registerModule('projectReport', projectReportModule)
    Promise.all([
      store.dispatch('projectReport/loadHeaders'),
      store.dispatch('projectReport/loadTable')])
      .then((result) => {
      }).catch((error) => {
        console.log(error)
      })
  },
  name: 'ProjectReport',
  data: function () {
    return this.$store.state.projectReport
  },
  methods: {
    request (props) {
      this.serverPagination = props.pagination
      this.$store.dispatch('projectReport/loadTable')
    }
  },
  beforeDestroy () {
    this.$store.unregisterModule('projectReport')
  }
}
</script>

<style>
</style>
